<template>
    <li class="nav-item dropdown" v-show="notifications.length">
        <a id="notifications" class="nav-link dropdown-toggle" href="#" role="button"
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
            <i class="fa fa-bell"></i>
        </a>

        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="notifications">
            <a :href="notification.data.link" v-for="notification in notifications"
               v-text="notification.data.message" class="dropdown-item"
               @click="markAsRead(notification)"></a>
        </div>
    </li>
</template>
<script>
  export default {
    data() {
      return {notifications: false}
    },
    created() {
      axios.get("/profiles/" + window.App.user.name + "/notifications")
        .then(response => this.notifications = response.data);
    },
    methods: {
      markAsRead(notification) {
        axios.delete("/profiles/" + window.App.user.name + "/notifications/" + notification.id);
      }
    }
  }
</script>
